<template>
	<view class="content">
		<view class="home_top">
			<view class="top_bg"></view>
			<view class="top_zi">
				 <view class="top_zi_all">
					 <view class="top_zi_all_li">
						 <text class="txtext">100.00</text>
						 <text>可提现（元）</text>
					 </view>
					 <view class="top_zi_all_li">
						 <text class="ztext">100.00</text>
						 <text>总资产（元）</text>
					 </view>
				 </view>
				 <view class="top_buttom">
					 <button @tap="withdrawal">提现</button>
				 </view>
			</view>	
		</view>
		<view class="wallet_ul">
			<view class="wallet_ul_title">
				<view :class="curNav == index?'active nav_left_items':'nav_left_items'" v-for="(item,index) in navLeft" :key='index' @tap="navTap(index)">
					{{item.navName}}
				</view>
			</view>
			<view class="wallet_ul_content">
				<view class="coupons_bottom_items" v-if="curNav==0" v-for="(item,index) in list" :key='index'  @tap="obtainPhone(item)">
					<view class="items_left">
						<text>订单收款</text>
						<text class="money">+200元</text>
					</view>
					<view class="items_middle">
						2017-10-08
					</view>
				</view>
				<view class="coupons_bottom_items" v-if="curNav==1" v-for="(item,index) in list" :key='index'  @tap="obtainPhone(item)">
					<view class="items_left">
						<text>订单收款</text>
						<text class="money">-200元</text>
					</view>
					<view class="items_middle">
						2017-10-08
					</view>
				</view>
			</view>
		</view>
		<view class="withdrawal" v-if="withdraw">
			<view class="withdraw_zi">
				<view class="withdraw_zi_top">
					<text>提现</text>
					<text class="iconfont icon-guanbi1" @tap="down"></text>
				</view>
				<view class="note_title">提现金额</view>
				<view class="amount_input">
					<text>￥</text>
					<input placeholder="请输入提现的金额" placeholder-class="input_zi"/>
				</view>
				<view class="note">注：您最多可提现  500元</view>
				<button class="push" @tap="withdrawsure">确认提现</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curNav:0,
				withdraw:false,
				navLeft:[
					{
						navName:'收入明细',
	
					},
					{
						navName:'支出明细',
	
					}
				],
				list:[
					{
						name:'1200'
					},{
						name:'1200'
					},{
						name:'1200'
					},
				]
			};
		},
		methods:{
			navTap(index){
				this.curNav = index
			},
			//提现
			withdrawal(){
				this.withdraw = true
			},
			withdrawsure(){
				uni.showToast({
					title: '提现中',
					duration: 2000
				})
				this.withdraw = false
			},
			down(){
				this.withdraw = false
			},
		},
		onLoad() {
			this.navTap(this.curNav)
		}
	}
</script>

<style>
.top_bg{
	background: url(https://www.135k.com/img/bg.png) center no-repeat;
	background-size:100% 100%;
	color: #fff;
	height: 180upx;
	width: 100%;	 
}
.top_data{
	font-size: 24upx;
	line-height: 80upx;
}
.top_zi{
	background: #fff;
	border-radius: 10upx;
	height: 300upx;
	position: absolute;
	bottom: 10upx;
	box-shadow:0 4upx 10upx #eee;
	width:90%;
	margin:0 5%;
	display:block;
	padding:0 40upx;
	box-sizing:border-box;

}
.top_zi_all{
	display: flex;
	align-content: space-between;
	padding:50upx 0;
}
.top_zi_all_li text{
	display: block;
	font-size: 24upx;
}
.top_zi_all_li .txtext{
	color: #ff5d76;
	font-size: 60upx;
	font-weight: 600;
}
.top_zi_all_li .ztext{
	font-size: 36upx;
	font-weight: 600;	
}
.home_top{
	position: relative;
	width: 100%;
	height:420upx;
	
}
.top_zi_all_li{
	text-align: left;
	width: 50%;
	justify-content:flex-end;
	display:flex;
	flex-direction:column;
}
.top_zi_all_li:last-child{
	text-align: right;
}
.top_buttom{
	display: flex;
	justify-content: flex-end;
}
.top_buttom button{
	font-size:24upx;
	padding:0 30upx;
	margin:0 0 0 20upx;
	line-height:50upx;
	height:50upx;
	border:1px solid #ff5d76;
	color:#ff5d76;
	font-size:24upx;
	background:#fff;
	border-radius:50upx;
}
.nav_left_items{
	width: 18%;
	text-align: center;
	line-height: 85upx;
	margin: 0 16%;
}
.nav_left_items.active{
	color: #ff5d76;
	border-bottom: 6upx solid #ff5d76;
}
.wallet_ul_title{
	display: flex;
}
.coupons_bottom_items{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 26upx;
	line-height: 100upx;
	border-bottom: 1px solid #eee;
}
.items_left{
	display: flex;
	align-items: center;
	font-size:26upx;
}
.items_left .money{
	color: #ff5d76;
	font-size: 30upx;
	font-weight: 600;
	padding-left: 15upx;
}
.items_middle{
	color: #a4a8b4;
	font-size:26upx;
}
.wallet_ul_content{
	padding: 20upx 30upx 0;
}
/* 提现 */
.withdrawal{
  height: 100%;
  background: rgba(43, 51, 62, 0.7);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99
}
.withdraw_zi{
  background: #f5f5f5;
  margin:300upx 100upx;
  padding: 30upx 60upx;
  border-radius: 10upx;
}
.withdraw_zi_top{
	font-size: 36upx;
	text-align: center;
	line-height:70upx;
	height: 100upx;
}
.note_title{
	font-size: 26upx;
}
.amount_input{
	line-height: 160upx;
	height: 160upx;
	display: flex;
	align-items: center;
}
.amount_input text{
	font-size: 60upx;
	font-weight: 600;
}
.amount_input input{
	font-size: 24upx;
	color: #bfbfbf;
}
.amount_input .input_zi{
	font-size: 24upx;
	color: #bfbfbf;
}
.withdraw_zi .note{
	color: #bfbfbf;
	font-size: 24upx;
}
.push{
	background:#ed493d;
	color:#fff;
	border-radius:50upx;
	width:300upx;
	line-height:65upx;
	height:65upx;
	margin-top:50upx;
	font-size:30upx;
}
.iconfont{
	float: right;
	font-size: 34upx;
	color: #d9d9d9;
	font-weight: 600;
}
</style>
